<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Performance Test Management Platform</title>
    <!-- MAIN CSS -->
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.ico">
    <style>
		/*Pop-up window to change password*/
		#form_login {
		    width: 400px;
		    height: 250px;
		    border-radius: 8px;
		    border: 1px solid #94f8a3;
		    background: #e9feec;
		    position: absolute;
		    left: 35%;
		    top: 25%;
		}
		/*Pop-up title*/
		.title {
		    color: #000000;
		    padding-left: 45%;
		    font-weight: bold;
		}
		
		.body {
		    color: #000000;
		    height: 30px;
		    font-size: 16px;
		    line-height: 30px;
		    padding-left: 20%;
		}
	</style>
</head>
<body>
<form method="post" id="form_login">
    <h1 class="title">Login</h1>
    <p class="body">Account:<input type="text" name="username"></p>
    <p class="body">Password:<input type="password" name="password"></p>
    <div style="text-align:center;"><button type="button" class="btn btn-primary" onclick="login()">Login</button></div>
</form>
</body>
</html>

<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/static/scripts/klorofil-common.js"></script>
<script type="text/javascript">
    function login() {
    	var data = $("#form_login").serialize();
    	$.ajax({
			type: 'POST',
			url: "/atp4p/login/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					window.location.href="/atp4p/project/";
				}else{
					alert("Login failure!"+res.msg)
				}
			},
			error: function(res){
				alert("Login failure!")
			}
		});
    };
</script>